<template>
  <div id="course">
<!--    <h1>免费课程</h1>-->
    <slot></slot>
    <hr>
    <ul id="freeCourseList">
      <li v-for="(item,index) in courselist" :key="index">
        <dl>
          <router-link :to="{
                name:'detail',params:{id:item.courseId}
              }">
          <dt class="pic"><img :src="item.coverFileUrl" alt=""></dt>
          <dt class="title">{{item.courseTitle}}</dt>
          </router-link>
          <dt class="total">共{{item.learningNum}}节课|{{item.participationsCount}}人报名</dt>
          <dt v-if="item.isFree==1" class="free">免费</dt>
         <dt v-else>
           <span class="newprice">￥{{item.discountPrice}}</span>
           <span class="oldprice">￥{{item.coursePrice}}</span>
           <a-tag color="orange" style="float: right;margin-right: 20px">限时钜惠</a-tag>
         </dt>

        </dl>
      </li>
    </ul>
  </div>
</template>

<script>
import {csourseList} from "@/api/api";

export default {
  name: "courseList",
  data(){
    return {
      courselist: [],
      newfree:"",
      oldfree:'',
      show:true
    }
  },
  methods:{
    courseInit() {
      csourseList(this.type,this.pagesize,this.pagenum).then(res => {
        // (res);
        if(res.code==0){
          this.courselist = res.rows
        }
      })
    }
  },
  props: {
    type: [String, Number],
    pagenum: {
      type: [String, Number],
      default: 1
    },
    pagesize: {
      type: [String, Number],
      default: 5
    },
  },
  created(){
    this.courseInit()
  }
}
</script>

<style scoped lang="less">
  #course{
    width: 1200px;
    margin: auto;
    h1{
      margin: 20px auto;
      font-size: 25px;
    }
    #freeCourseList {
      overflow: hidden;
      li{
        width: 20%;
        float: left;
        margin-bottom: 20px;
        dt{
          text-align: left;
        }
        .pic{
          width: 223px;
          height: 122px;
          transition: all 0.5s;
          text-align: center;
          overflow: hidden;
          img{
            width: 100%;
            height: 100%;
            &:hover{
              transform: scale(1.1)
            }
          }
        }
        .title{
          font-size: 14px;
          font-weight: 700;
          color: #444546;
          &:hover{
            color: #00cf8c;
          }
        }
        .total{
          color: #888;
          font-size: 14px;
        }
        .free{
          color: #00cf8c;
          font-size: 16px;
        }
        .newprice{
          color: red;
          font-size: 15px;
          margin-right: 5px;
          font-weight: 700;
        }
        .oldprice{
          color: gray;
          font-size: 12px;
          text-decoration: line-through;
        }

      }

    }
  }
</style>